<template>
    <div class="IndexGoodsList">
        <ul>
            <li v-for="(item,index) in goodsList" :key="index" @click="handelSwitchGoodsBuy(item.goods_id)">
                <div class="pic" :style="picSize"><img width="100%" height="100%" :src="item.goods_thumbnail_url" alt=""></div>
                <div class="goodsInfo">
                    <div class="title">
                        <img v-if="true" src="https://commimg.pddpic.com/oms_img_ng/2020-11-16/db7bb73d-e350-4ec6-9e71-c87c82ba6bd6.png?imageView2/q/80/format/webp" alt="">
                        {{item.goods_name}}
                    </div>

                    <div class="info">
                        <p class="advantage"> <span>退货包运费</span> <span>极速退款</span> <span>满15返1</span> </p>
                        <div class="price-count">
                            <div class="marginTop">
                                <span class="Symbol">￥</span>
                                <span class="price">{{item.min_normal_price/100}}</span>
                                <span class="count">已拼{{item.sales_tip}}</span>
                            </div>

                            <div class="avatars marginTop">
                                <van-image
                                        round
                                        width="20px"
                                        height="20px"
                                        :src="'https://bing.ioliu.cn/v1/rand?w=60&h=60&time='+Math.random()*999"
                                />
                                <van-image
                                        round
                                        width="20px"
                                        height="20px"
                                        :src="'https://bing.ioliu.cn/v1/rand?w=60&h=60&time='+Math.random()*999"
                                />
                            </div>
                        </div>
                        <p class="rank marginTop">畅销榜第{{Math.round(Math.random()*10)}}名</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "IndexGoodsList",
        props: {
            picSize: {
                type: Object,
                default() {
                    return {
                        width: '156px',
                        height: '156px',
                    }
                }
            },
            goodsList:Array
        },
        methods:{
            handelSwitchGoodsBuy(id){
                this.$router.push({
                    path: '/goodsBuy',
                    query:{
                        goods_id: id
                    }
                })
            },

        },
    }
</script>

<style lang="less" scoped>
    .IndexGoodsList{
        margin: 25px 24px 0;
        padding-bottom: 100px;
        ul {
            li {
                display: flex;
                margin: 24px 0;

                .pic{
                    width: 312px;
                    height: 312px;
                    /*border: 1px solid blue;*/
                    margin-right: 15px;
                }
                .goodsInfo{
                    flex: 1;
                    display: inherit;
                    flex-direction: column;
                    justify-content: space-between;
                    /*border: 1px solid blue;*/

                    .title{
                        font-size: 28px;
                        font-weight: 600;

                        img {
                            width: 74px;
                            height: 30px;
                        }
                    }

                    .advantage{
                        font-size: 24px;
                        color: #FF5706;
                    }

                    .price-count{
                        height: 40px;
                        color: #FF5706;
                        font-size: 28px;
                        font-weight: bold;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .Symbol{
                            font-size: 16px;

                        }
                        .count{
                            color: #9c9c9c;
                        }

                        .avatars{
                            min-width: 70px;
                            height: 100%;
                            position: relative;
                            .van-image{
                                position: absolute;
                                border: 1px solid white;
                            }
                            .van-image:last-child{
                                left: 20px;
                                z-index: -1;

                            }
                        }

                    }
                    .rank{
                        color: #58595b;
                        font-size: 24px;
                    }
                }
            }
        }
    }

    .marginTop{
        margin-top: 20px;
    }

</style>